<!-- 放原生模态框，扩展更多刷新，解决安卓苹果的原生样式和小程序不一样 --> 
<template>
	<view class="qq-confirm" >
		<u-mask :show="showModal" :zoom="false">
			<view class="modal-dialog">
				<view class="modal-title">{{titleContent?titleContent:'提示'}}</view>
				<view class="modal-content">
					<view >{{mainContent?mainContent:''}}</view>
					<slot ></slot>
				</view>
				<view class="modal-bottom">
					<view v-if="showCancel" :style="{color:cancelColor}" class="model-left" @click="hideModal">{{textCancel}}</view>
					<view  :style="{color:sureColor}" class="model-right" @click="sure">{{textSure}}</view>
				</view>
			</view>
		</u-mask> 
	</view>
</template>

<script> 
/** 点击确认和取消都会触发confirm, 通过res.confirm判断是确认还是取消
<qq-confirm :show="showConfirm" title="警告" sure-text="知道啦" sure-color="#333333" 
	:show-cancel="true" cancel-text="取消" cancel-color="#999"
	@cancel="" @confirm="onConfirm">
	<view class="slot">自定义显示内容</view>
</qq-confirm> 
data:{
	showConfirm:false,
},
methods:{
	onConfirm(res){
		this.showConfirm=false;
		if(res.confirm){
			
		}
	}
}

 */
	export default { 
		props: {  
			
			show:{
				type:Boolean,
				default:false
			},
			confirm:{
				type:Function,
				default:null
			}, 
			cancel:{
				type:Function,
				default:null
			}, 
			
			title:{
				type:String,
				default:null
			},
			content:{
				type:String,
				default:null
			},
			sureText:{
				type:String,
				default:"确定"
			},
			showSure:{
				type:Boolean,
				default:true
			},
			cancelText:{
				type:String,
				default:"取消"
			},
			showCancel:{
				type:Boolean,
				default:true
			},
			sureColor:{
				type:String,
				default:null
			},
			cancelColor:{
				type:String,
				default:null
			}
			
		},
		name:"qq-confirm",
		created() {   
			this.showModal=this.show;
			this.cancelShow=this.showCancel;
			if(this.cancelText!=null){
				this.textCancel=this.cancelText;
			}
			if(this.sureText!=null){
				this.textSure=this.sureText;
			}
			if(this.content!=null){
				this.mainContent=this.content;
			}
			this.sureShow=this.showSure;
			this.titleContent=this.title;
			
			
			this.iconImg=this.icon;
		}, 
		computed: {
			
		},
		watch:{  
			
			content(val){
				this.mainContent=val;
			},
			show(val){ 
				this.showModal=val;
			},
			showCancel(val){
				this.cancelText=val;
			},
			showSure(val){
				this.sureShow=val;
			},
			cancelText(val){
				this.textCancel=val;
			},
			sureText(val){
				this.textSure=val;
			},
			title(val){
				this.titleContent=val;
			},
			
		},
		data() {
			return { 
				showModal:false,
				mainContent:'',
				
				titleContent:'',
				cancelShow:true,
				textCancel:"取消",
				sureShow:true,
				textSure:"确定",
				iconImg:"none",
			} 
		},    
		methods: {
			hideModal(){ 
				this.showModal=false;
				this.$emit('cancel',{});  
				this.$emit('confirm',{confirm:false});  
			},
			sure(){  
				this.showModal=false;
				this.$emit('confirm', {confirm:true});  
			}
			 
		}
	}
</script>

<style lang="scss">
.qq-confirm{
	.modal-dialog{
		position: fixed;
		z-index: 999;
		width: 560upx;
		height: 360upx;
		left:calc(50vw - 280upx);
		top:calc(50vh - 180upx);
		background-color: #fff;
		border-radius: 10upx;
	}
	.modal-bottom{
		display: flex;
		position: absolute;
		bottom: 0;
		left:0;
		height: 88upx;
		line-height: 88upx;
		width: 100%;
		text-align: center;
		border-top: 1upx solid #f2f2f2;
		view{
			flex:1;
		}
		.model-left{
			border-right: 1upx solid #f2f2f2;
			color: #999;
		}
	}
	.modal-content{
		text-align: center; 
		padding:20upx 50upx;
	}
	.modal-title{
		text-align: center;
		font-size: 36upx;
		font-weight: 700;
		padding:30upx;
	}
}
</style>
